<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../teams/team-add.html">

<dom-module id="empty-pages">
    <template>
        <style>
        :host {
            background: #eee;
        }

        a {
            color: black;
            text-decoration: none;
        }
        #onboarding-area {
            margin: 0 auto;
            width: 100%;
            max-width: 600px;
            box-sizing: border-box;
            @apply --layout-vertical;
            width: 100%;
            max-width: 600px;
            height: auto;
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none;   /* Chrome/Safari/Opera */
            -khtml-user-select: none;    /* Konqueror */
            -moz-user-select: none;      /* Firefox */
            -ms-user-select: none;       /* Internet Explorer/Edge */
            user-select: none;
            transition: var(--material-curve-320);
            transition-delay: 200ms;
        }
        #onboarding-area[higher] {
            transform: translate(0, -150px);
        }
        .onb-graphics {
            margin: 0 auto;
            height: auto;
            vertical-align: middle;
            top: 0;
            width: 200px;
            max-width: 100%;
        }
        #list-form {
            text-align: center;
            padding-bottom: 200px;
        }
        paper-button{
          margin: 12px;
        }
        </style>
        <div id="list-form">
          <img class="onb-graphics top" src="../../assets/onboarding/clouds.svg"/>
            <div hidden$="[[!isStacks]]">
                <template is="dom-if" if="[[!needCloud]]">
                    <div>To create [[section.id]] you need to use a template.</div>
                    <paper-button class="wide blue" on-tap="_goToTemplate"> VIEW YOUR TEMPLATES </paper-button>
                </template>
                <template is="dom-if" if="[[needCloud]]">
                    <div>To create [[section.id]] you need to first add clouds.</div>
                    <paper-button class="wide blue" on-tap="_addCloudAction"> ADD YOUR CLOUDS </paper-button>
                </template>
            </div>
            <div hidden$="[[isStacks]]">
              <template is="dom-if" if="[[!needCloud]]">
                    <div hidden$="[[!isIncidents]]">Hooray! You have no [[section.id]]!</div>
                    <div hidden$="[[isIncidents]]">No [[section.id]] available. Yet.</div>
                    <paper-button class="wide blue" on-tap="_fabAction" hidden$="[[isIncidents]]"> ADD YOUR [[section.id]] </paper-button>
              </template>
              <template is="dom-if" if="[[needCloud]]">
                    <div>To view [[section.id]] you need to first add clouds.</div>
                    <paper-button class="wide blue" on-tap="_addCloudAction"> ADD YOUR CLOUDS </paper-button>
                </template>
            </div>
        </div>
        <team-add></team-add>
    </template>
</dom-module>
<script>

Polymer({
    is: 'empty-pages',

    properties: {
        section: {
            type: Array
        },
        clouds: {
            type: Array
        },
        isStacks: {
            type: Boolean,
            value: false,
            computed: '_computeIsStacks(section)'
        },
        needCloud: {
            type: Boolean,
            value: true,
            computed: "needCloudChange(clouds, section)"
        },
        isIncidents: {
            type: Boolean,
            value: true,
            computed: "_computeIsIncidents(section)"
        },
    },
    needCloudChange: function(clouds, section){
        if (this.clouds.length > 0) {
            return false;
        } else {
            if( ["machines", "networks", "images", "stacks"].indexOf(this.section.id) > -1 ){
                return true;
            } else {
                return false;
            }
        }
    },
    _addCloudAction: function(){
        this.dispatchEvent(new CustomEvent('go-to', { bubbles: true, composed: true, detail: {url: '/clouds/+add'} }));

    },
    _goToTemplate: function(){
        this.dispatchEvent(new CustomEvent('go-to', { bubbles: true, composed: true, detail: {url: '/templates'} }));

    },
    _computeIsStacks: function(section){
        return this.section.id == "stacks";
    },
    _computeIsIncidents: function(section){
        return this.section.id == "incidents";
    },
    _fabAction: function(e) {
        if(this.section.id != "teams") {
            console.debug('fabAction', e, this.section.add);
            this.dispatchEvent(new CustomEvent("go-to", { bubbles: true, composed: true, detail:  {url: this.section.add} }));
        } else {
            var dialog = this.shadowRoot.querySelector('team-add');
            dialog.openDialog();
        }
    }

});
</script>
